
<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
<meta name="format-detection" content="telephone=no" />
<title>管理员登录</title>
    <script type="text/javascript" src="/public/libs/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/public/libs/layer/layer.js"></script>
    <script type="text/javascript" src="/app/common/view/app.js"></script>
    <script type="text/javascript" src="/public/libs/geetest/gt.js"></script>
    <link type="text/css" rel="stylesheet" href="/public/static/css/bootstrap.css" /> 
    <link type="text/css" rel="stylesheet" href="/public/static/css/icon.css" />
    <link type="text/css" rel="stylesheet" href="/res/sign/login.css" /> 
</head>

<body>
<div class="aw-login">
    <div class="mod center-block" style="padding-top: 40px;">
        <form class="form-horizontal" onsubmit="return app.login(this,'{:url('login/login')}','{$url}');" id="ajaxForm" action="" method="post">
            <div class="alert alert-danger collapse error_message"></div>
            <div class="form-group">
                <label>管理员</label>
                <input type="text" class="form-control" name="username" placeholder="用户名" value="" />
                <i class="icon icon-user"></i>
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control" placeholder="密码" type="password" name="password" onkeydown="if (event.keyCode == 13) { document.getElementById('login_submit').click(); };" autofocus/>
                <i class="icon icon-lock"></i>
            </div>
            <div class="form-group">
                <label>验证码</label>
                <div class="row" style="padding-left:15px;padding-right:15px">
                   <div id="wait" class="alert alert-warning alert-dismissible show" style="padding: 8px;margin-bottom: 10px;">
                        正在加载验证码...
                    </div>

                    <div id="notice" class="alert alert-danger alert-dismissible hide" style="padding: 8px;margin-bottom: 10px;">
                        请先完成验证
                    </div>
                    <div id="embed-captcha"></div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary" id="login_submit">登录</button>
        </form> 
    </div>
</div>
</body>
</html>
<style type="text/css">
    .show {display:}
    .hide {display:none}
</style>
<script type="text/javascript">
    var handlerEmbed = function (captchaObj) {
        $("#btnAdminLogin").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice").addClass('show') ;
                $("#notice").removeClass('hide') ;
                setTimeout(function () {
                    $("#notice").addClass('hide') ;
                    $("#notice").removeClass('show') ;
                }, 2000);
                e.preventDefault();
            }
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "{:url('login/get_geetest_status')}", // 加随机数防止缓存
        type: "post",
        dataType: "json",
        success: function (data) {
            console.log(data);
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha,
                product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);
        }
    });
</script>